<template>
  <div class="wrapper">
    <div class="top">
      <div class="top-left">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            全部状态<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>启用</el-dropdown-item>
            <el-dropdown-item>禁用</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="top-input">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="keyword" @keyup.enter.native="handleEnter">
            <el-button slot="append" icon="el-icon-search" @click="searchAdmin"></el-button>
          </el-input>
        </div>
      </div>
      <div class="top-right">
        <el-button type="primary" @click="addAccount" >新增账号</el-button>
      </div>
    </div>
    <div class="bottom">
       <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%">
        <el-table-column
          prop="name"
          label="姓名"
          width="300">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="300">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
            <template slot-scope="scope">
              <el-row>
                <el-button @click="editAdmin(scope)">修改</el-button>
                <el-button @click="forbbiden(scope)">{{scope.row.status_text}}</el-button>
              </el-row>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <edit-admin ref="editAdmin" :scope="scope"></edit-admin>
    <Pagination :total="total" @submit="handleSubmit"></Pagination>
  </div>
</template>
<script>
import {getAdmin, forbbidenAdmin, searchAdmin} from '@/api/user'
import Pagination from '@/views/pagination/pagination'
import EditAdmin from '@/views/account/editAdmin'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      scope: {},
      keyword: '',
      total: 0,
      
    }
  },
  methods: {
    handleSubmit(val) {
      this.page = val
      // console.log(val)
      this.getAdmin()
    },
    handleEnter() {
      this.searchAdmin()
    },
    searchAdmin() {
      searchAdmin({keyword: this.keyword})
        .then((res) => {
          if (res.code ===200) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
    },
    addAccount() {
      this.$router.push({path: '/add/addAccount'})
    },
    editAdmin(scope) {
      this.$refs.editAdmin.changeVisable()
      this.scope = scope
    },
    forbbiden(scope) {
      forbbidenAdmin({admin_user_id: scope.row.id})
        .then((res) => {
          if (res.code === 200) {
            Message({
              message: res.message,
              type: "info"
            })
          }
        })
      scope.row.status_text = scope.row.status_text === '启用' ? '禁用' : '启用'
      
      // console.log(scope.row.status_text)
    },
    getAdmin() {
      getAdmin({page: this.page})
      .then((res) => {
        // console.log(res)
        res.data.list.forEach((item) => {
          item.status_text = item.status_text === '启用' ? '禁用' : '启用'
        })
        this.tableData = res.data.list
        this.total = res.data.total
        // console.log(res.data.total)
      })
    }
  },
  created() {
    this.getAdmin()
  },
  components: {
    EditAdmin,
    Pagination
  }
}
</script>
<style lang="scss" scoped>
.top{
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  .top-left{
    display: flex;
    justify-content: flex-start;
  }
}
.el-dropdown-menu{
  width: 80px;
}
.el-dropdown-link{
  display: inline-block;
  line-height: 40px;

}
.top-input{
  margin-left: 20px;
  .el-input{
    width: 332px;
    height: 32px !important;
  }
}
.el-button /deep/ .el-icon-search{
  font-size: 25px;
  position: relative;
  top: 2px;
}
.el-input /deep/ .el-input-group__append{
  background-color: rgb(221, 221, 221) !important;
  box-sizing: border-box;
}
.top-right /deep/ .el-button{
  width: 87px;
  height: 30px;
  background-color: rgb(27, 166, 135);
  border-radius: 6px;
  font-size: 14px;
  padding: 0px;
  border-width: 0px;
  border-style: solid;
  text-align: center;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  opacity: 1;
}
.el-row{
    .el-button{
      width: 59px;
      height: 30px;
      border-radius: 6px;
      font-size: 14px;
      padding: 0px;
      border-width: 0px;
      border-style: solid;
      text-align: center;
      line-height: 20px;
      font-weight: normal;
      font-style: normal;
      opacity: 1;
      color: #fff;
      &:nth-child(1){
        background-color: rgb(27, 166, 135);
      }
      &:nth-child(2){
        background-color: rgb(79, 78, 78);
      }
  }
}
.el-table /deep/ th {
  text-align: center;
}
.el-table /deep/ td{
  text-align: center;
}
.bottom{
  padding: 20px;
  padding-top: 0;
}
</style>
